<!-- Search Result Modal -->
<div class="modal modal-search fade" id="searchModal" tabindex="-1" data-ng-controller="SearchController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
        <h1 class="sub-header">Search PetClinic</h1>
        <em class="text-muted">Start typing to search for pets ...</em>
      </div>
    </div>
    <div class="modal-body">
      <div class="container">
        <form>
          <div class="form-group">
            <input type="search" class="form-control" data-ng-model="searchText" data-ng-model-options="{debounce: 1000}">
            <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
          </div>
        </form>
        
        <!-- ### TODO:
        Note by AA: I'm just showing the results for reference purpose
        This should be hidden by default and only be shown if there's result -->
        <div class="modal-seach-result">
          <h2 class="form-group-heading">Result of your search query</h2>
          <div class="row thumbnail-wrapper">
            <div class="col-md-3" data-ng-repeat="pet in results">
	            <div class="thumbnail">
		          <a data-ui-sref="pets({id : pet.id})"><img data-ng-src="images/pets/pet{{pet.id % 10 + 1}}.jpg" alt="Generic placeholder image" class="img-circle"></a>
		          <div class="caption">
		            <h3 class="caption-heading"><a href="#" data-ng-bind="pet.name"></a></h3>
		            <p data-ng-bind="pet.type.name"></p>
		          </div>
		        </div>
            </div>
          </div>
          <!-- /row -->
        </div>
      </div>
    </div>
  </div>
</div>
